<html>

<head>
  <script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js" type="text/javascript"></script>
  <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js" type="text/javascript"></script>
  <!-- <script src="../../../dist/index.umd.js" type="text/javascript"></script> -->
  <script src="https://unpkg.com/jsonx/dist/index.umd.js" type="text/javascript"></script>
</head>

<body>
  <div id="main"></div>
  <script>
    const users = [
      {
        name:'bob smith',
        email:'bob.smith@email.com'
      },
      {
        name:'jane doe',
        email:'jane.doe@email.com'
      },
      {
        name:'billy bob',
        email:'billy.bob@email.com'
      },
    ];
    const JXM = {
      component: 'div',
      children: [{
            component: 'h3',
            children: '__spread',
        },
        {
          component: 'ul',
          props:{
            __spread: users,
          },
          __spreadComponent:{
            component:'li',
            thisprops:{
              _children:['__item','name']
            }
          },
        },
        {
            component: 'h3',
            children: '__spread with traverse props',
        },
        {
          component: 'ul',
          props:{
            users,
          },
          thisprops:{
            __spread:['users']
          },
          __spreadComponent:{
            component:'li',
            thisprops:{
              _children:['__item','email']
            }
          },
        },
      ]
    };

    jsonx.jsonxRender({
      jsonx: JXM,
      querySelector: '#main',
    });
  </script>
</body>

</html>